<template>
    <div class="flex-container border border-black border-b-0">
        <div class="left-div ml-[20px]">
            <p class="text-2xl font-bold">低代码平台</p>
        </div>
        <div class="right-div mr-[20px] flex items-center">
            <el-avatar :size="50" :src="store.state.avatar" @click="openUploadAvatarPage"/>
            {{ $store.state.realName }}
            <el-dropdown @command="handleCommand">
                <span class="el-dropdown-link">
                    <el-icon class="el-icon--right"><arrow-down /></el-icon>
                </span>
                <template #dropdown>
                    <el-dropdown-menu>
                        <el-dropdown-item command="openRePasswordPage">修改密码</el-dropdown-item>
                        <el-dropdown-item command="logout">退出登录</el-dropdown-item>
                    </el-dropdown-menu>
                </template>
            </el-dropdown>
        </div>
        <UploadAvatar ref="uploadAvatarRef"></UploadAvatar>
    </div>
</template>

<script setup>
import { reactive, ref } from 'vue'
import { ElMessage } from 'element-plus'

import router from '@/router/index.js'
import store from '@/store/index.js'
import {logoutReq} from '@/api/logout.js'

import UploadAvatar from '@/components/UploadAvatar.vue'

const handleCommand = async (command) => {
    if (command == 'openRePasswordPage') {
        ElMessage(`打开修改密码的弹框`)
    } else if (command == 'logout') {
        //1、调logout接口
        const res = await logoutReq();
        if (res.code == 200) {
            //2、清空localStorage
            localStorage.clear();
            //3、router push login 页面
            router.push('/login')
        }
    }
}

const uploadAvatarRef = ref()
const openUploadAvatarPage = () => {
    uploadAvatarRef.value?.open()
}
</script>

<style scoped>
.flex-container {
    display: flex;
    /* flex布局 */
    justify-content: space-between;
    /* 子元素之间的间隔平均分布，实现靠左和靠右的效果 */
    align-items: center;
    /* 上下居中 */
    height: 60px;
}
</style>
